<script setup lang="ts">
	import CommonStars from '../../Sub/Stars.vue';

	interface IProps {
		starNum: number;
		score: string;
	}

	defineOptions({
		name: 'DetailStars'
	});

	const props = withDefaults(defineProps<Partial<IProps>>(), {
		starNum: 0,
		score: '0.0'
	});
</script>

<template>
	<div class="stars-bd">
		<span class="iconfont icon-smile"></span>
    <common-stars :starNum="props.starNum" />
		<span class="score">{{ props.score }}分</span>
	</div>
</template>

<style lang="scss" scoped>
	@import '../../../../assets/styles/variables.scss';

	.stars-bd {
		display: flex;
		height: .44rem;
		padding: .03rem .15rem 0;
		background-color: #fff;
		border-bottom: 1px solid #ddd;
		box-sizing: border-box;

		.icon-smile {
			font-size: .18rem;
			margin: .08rem .1rem 0 0;
			color: #999;
		}

		.score {
			font-size: .16rem;
			margin: .1rem 0 0 .15rem;
			color: $defaultOrange;
		}
	}	
</style>












